.formstyle{
  background-image: linear-gradient(195deg, #000, #000);
  border-radius: 25px;
  /* padding: 1%; */
  padding: 1% !important;
}

label{
  font-size:1rem;
}
h4{
  font-size:2rem;
}
.captcha > img{
  /* float: inline-end; */
  border: 1px solid #ced4da;
  }
  
  .captcha > input{
    /* float: inline-start; */
  border: 1px solid white;
  width: 46%;
  min-height: 51px;
  background-color: transparent;
  color: white;
  padding-left: 5%;
  padding-right: 5%;
  }
.dispProp,.disploginName,.disppassword,.disppasswordrepeat,.disPin{
  display: none;
}
.dispName:focus + .dispProp{
  display: block;
}
.loginName:focus + .disploginName{
  display: block;
}
.userPassword:focus + .disppassword{
  display: block;
}
.userPasswordRepeat:focus + .disppasswordrepeat{
  display: block;
}
.userPIN:focus + .disPin{
  display: block;
}
hr{
    color: white;
}
.head {
  color: white;
  font-family: monospace;
}

a{
  color: grey;
}
a:hover{
  color: #242a2c;
}
h6{
    color:grey;
    font-family: monospace;
    font-size: 12px;
}
h3{
  color: white;
}
.dispProp>p>img{
  width:20px ;
  margin-right: 10px;
  height: 20px;
}

.dispProp>p{
  margin-top: 10px;
  font-size: 15px;
  line-height: 7px;
  color: gray;
}
.disploginName>p>img{
  width:20px ;
  margin-right: 10px;
  height: 20px;
}

.disploginName>p{
  margin-top: 10px;
  font-size: 15px;
  line-height: 7px;
  color: gray;
}
.disppassword>p>img{
  width:20px ;
  margin-right: 10px;
  height: 20px;
}
.smtext{
  font-size: 20px;
}
.key{
  overflow-wrap: break-word;
}
.gray{
  color: gray;
}
.grey{
  color: gray;
}

a{
  text-decoration: none;
}

.disppassword>p{
  margin-top: 10px;
  font-size: 15px;
  line-height: 7px;
  color: gray;
}
.disppasswordrepeat>p>img{
  width:20px ;
  margin-right: 10px;
  height: 20px;
}

.disppasswordrepeat>p{
  margin-top: 10px;
  font-size: 15px;
  line-height: 7px;
  color: gray;
}
.disPin>p>img{
  width:20px ;
  margin-right: 10px;
  height: 20px;
}

.disPin>p{
  margin-top: 10px;
  font-size: 15px;
  line-height: 7px;
  color: gray;
}

form{
  background-color: rgb(30 35 36);
    width: 35vw;
    border-radius: 4px;
}

label{
    color: white;
    font-family: monospace;
}
label>img{
  height: 15px;
  width: 15px;
}
#but{
    background-color: #101010;
    border: none;
}
.input[type=password]{
  width: 100%;
  padding: 5px 8px;
  /* margin: 8px 0; */
  display: inline-block;
  color: gray !important;
  border-radius: 4px;
  background-color:  transparent !important;
  border: 1px solid white;
  box-sizing: border-box;
}
.input[type=number] {
  background-color:  #242a2c;
  border: none;
  color: gray !important;
}

.input[type=password] {
  background-color:  transparent !important;
  /* border: none; */
  color: gray !important;
}  
.input[type=text]{
  background-color:  transparent !important;
  /* border: none; */
  color: gray !important;
}
#but{
    background-color:  #242a2c;
    border: none;
  }
  
#but:hover {
    background-color: rgb(34, 30, 30);
  }

.regBtn{
  display: flex; 
  margin-top: 1%;
}

@media only screen and (max-width: 2076px) {
  form{
    width: 40vw;
  }
}

@media only screen and (max-width: 1803px) {
  form{
    width: 50vw;
  }
}

@media only screen and (max-width: 1427px) {
  form{
    width: 60vw;
  }
}

  @media only screen and (max-width: 1181px) {
    form{
      width: 70vw;
    }
  }

  @media only screen and (max-width: 1007px) {
   form{
     width: 75vw;
   }

   .regBtn{
    margin-top: 5%;
  }
  }

  @media only screen and (max-width: 938px) {
   form{
     width: 90vw;
   }

   .regBtn{
    margin-top: 2%;
  }
  }
  @media only screen and (max-width: 800px) {
   form{
     width: 85vw;
   }

      .regBtn{
        display: block;
        margin-top: 5%;
        text-align: center;
      }
  }

  @media only screen and (max-width: 667px) {
    form{
      width: 100vw;
    }
  }

  @media only screen and (max-width: 565px) {
    .captcha > input{
      width: 100%;
    }

    .regBtn{
      margin-top: 14%;
    }
  }
  @media only screen and (max-width: 500px) {
   form{
     width: 100vw;
   }

   .regBtn{
    margin-top: 20%;
  }
  }

 


 @media only screen and (max-width: 280px) {
  form{
    width: 100vw;
  }

  .logBtn{
    display: block;
    margin-top: 50%;
    text-align: center;
  }
 }